<%-- 
    Document   : captcha
    Created on : 03/09/2014, 20:16:57
    Author     : luiz
--%>



<%@page import="util.Captcha"%>
<%@page import="java.io.File"%>
<%@page import="java.io.FileOutputStream"%>
<%@page import="java.io.IOException"%>
<%@page import="java.io.PrintWriter"%>
<%@page import="javax.servlet.ServletException"%>
<%@page import="javax.servlet.http.HttpServlet"%>
<%@page import="javax.servlet.http.HttpServletRequest"%>
<%@page import="javax.servlet.http.HttpServletResponse"%>



<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <div>
            <%
                Captcha c = new Captcha();
                Double num = (Math.random() * 10000);
                String caminhoServer = request.getServletContext().getRealPath(File.separator);
                String nome = num.intValue() + ".jpg";
                File local = new File(caminhoServer + "img\\" + nome);
                local.createNewFile();
                c.salvar(local);


            %>       
            <div style="border-width: 1px;
                 border-style: solid;
                 border-color: #00f;
                 width: 160px;
                 padding: 10px 10px 10px 10px"

                 >
                <form method='post' action="ValidaLoginServlet" enctype="multipart/form-data">
                    </br><label>Login</label><br/>
                    <input type='text' name='login' style="width: 150px">
                    </br><label>Senha</label><br/>
                    <input type='password' name='senha' style="width: 150px">
                    </br> 
                    <center>
                        <img src='img/<%=nome%>'>
                    </center>
                    </br>  
                    <input type="button" onclick="location.reload();" value="Atualizar" style="width: 75px"/>

                    <input type="button" onclick="pickSong(0)" value="Ouvir" style="width: 75px"/>
                    </br>
                    <input type='text' name='digitado' placeholder="Digite as Letras" style="width: 150px" onkeyup="this.value = this.value.toUpperCase();">
                    </br>
                    <input type="hidden" name="codigo" value="<%=c.getFrase()%>">

                    <input type='submit' name='validar' value='Entrar' style="width: 150px">
                    </br>

                </form>
            </div>
            <%local.deleteOnExit();%>
            <audio controls="controls" hidden style="width: 150px"></audio>
            <script>
                var urls = new Array();

                urls[0] = 'http://localhost:8080//ProjetoIntegrador//song//alfabeto//<%=c.getFrase().toLowerCase().charAt(0)%>.ogg';
                urls[1] = 'http://localhost:8080//ProjetoIntegrador//song//alfabeto//<%=c.getFrase().toLowerCase().charAt(1)%>.ogg';
                urls[2] = 'http://localhost:8080//ProjetoIntegrador//song//alfabeto//<%=c.getFrase().toLowerCase().charAt(2)%>.ogg';
                urls[3] = 'http://localhost:8080//ProjetoIntegrador//song//alfabeto//<%=c.getFrase().toLowerCase().charAt(3)%>.ogg';
                urls[4] = 'http://localhost:8080//ProjetoIntegrador//song//alfabeto//<%=c.getFrase().toLowerCase().charAt(4)%>.ogg';


                var current = 0;

                function pickSong(num) {
                    current = num;
                    playSong();
                }

                function nextSong() {

                    if (current >= urls.length - 1) {

                    } else {
                        current++;
                        playSong();
                    }
                }

                function playSong() {
                    audioPlayer.src = urls[current];
                    audioPlayer.load();
                    audioPlayer.play();
                }

                var audioPlayer = document.getElementsByTagName('audio')[0];

                audioPlayer.addEventListener('ended', nextSong, false);
                audioPlayer.addEventListener('error', nextSong, true);
            </script>
        </div>
    </body>
</html>
